/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="common-page home-manage__page">
        <div style="background: #0c0323;" class="home-manage__top">
            <!--            <header-opr></header-opr>-->
            <p class="home-manage__top-title">
                <lang>你好！欢迎使用 Genius AI</lang>
            </p>
            <p class="home-manage__top-title home-manage__top-desc">GeniusAI算法研发平台，提供简单、高效、智能和安全的AI研发体验</p>
            <img src="../common/resource/img/bg.png" alt="bg" class="home-manage__img">
        </div>
        <div class="home-manage__body">
            <resource-detail ref="resourceDetail"
                             from-page="home"
                             @update-charts-data="updateData"
                             @refresh-resource="_refreshResource"/>
            <div>
                <resource ref="resource" charts-data="chartsData"></resource>
                <div class="home-manage__bottom">
                    <div class="home-manage__bottom-quick-enter-item">
                        <p class="quick-title">帮助中心</p>
                        <div class="quick-content">
                            <div v-for="item in HELP_CENTER" :key="item.name" class="quick-content__item">
                                <icon-bg :icon="item.icon" color="#495060" :default-width="15" :size="15"></icon-bg>
                                <span class="font-important quick-content-text quick-content__name"
                                      @click="handleClickHelp(item.url)">{{item.name}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="home-manage__bottom-quick-enter-item">
                        <p class="quick-title">快捷入口</p>
                        <div class="quick-content">
                            <div v-for="(item,index) in quickEnterList"
                                 :key="index"
                                 class="quick-content__item">
                                <icon-bg :icon="item.icon" color="#495060" :default-width="15" :size="15"></icon-bg>
                                <span class="font-important quick-content-text quick-content__name"
                                      @click="handleClickQuickEnter(item)">{{ item.name }}:</span>
                                <span class="font-important quick-content-text"> {{ item.number }} </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    </div>
</template>

<style lang="less">
.home-manage__bottom {
    background: #ebedf0;
    margin: 20px 0 0 0;
    display: flex;
    flex-direction: column;
}

.home-manage__bottom-quick-enter-item {
    width: 322px;
    height: 152px;
    background: #FFF;
    margin-bottom: 20px;
    padding: 16px 20px;
    border-radius: 6px;
    
    &:last-child {
        font-size: 14px;
        margin-bottom: 0;
    }
    
    .quick-title {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        
    }
    
    .quick-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        
        .quick-content__item {
            margin-top: 24px;
            width: 126px;
            height: 24px;
            display: flex;
            align-items: center;
        }
        
        .quick-content-text {
            font-size: 14px;
            margin-left: 16px;
            cursor: pointer;
        }
        
        &__name {
            &:hover {
                text-decoration: underline;
            }
        }
        
        
    }
}

.home-manage__page {
    overflow: auto;
    
    .table-data {
        height: calc(100% - 402px);
    }
    
    .page-title {
        border-bottom: 1px solid #eee;
    }
    
    .home-manage__body {
        margin-bottom: 20px;
        display: flex;
    }
}

.home-manage__top {
    margin: 24px 40px 20px 40px;
    padding: 17px 50px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    .home-manage__img {
        position: absolute;
        top: 0;
        right: 0;
    }
}

.home-manage__top-title {
    font-size: 28px;
    color: #FFF;
}

.home-manage__top-desc {
    margin: 25px 0 35px;
    font-size: 18px;
}
</style>

<script>

/**
 * Created by zhb on 2020/6/16
 */

// import HeaderOpr from './header_opr';

import store from 'src/vuex/store';

let userID = store.state.userId;


import addProjectForm from 'src/home/mod_cluster/project_manager/components/label_form/add_project_form.vue';
import urlAdapter from 'src/home/mod_common/url_adapter';

const PROJECT_URLS = {
    post: urlAdapter(`user/${userID}/project`)
};

import notebookUrlAdapter from 'src/home/mod_common/notebooks_url_adapter';

const NOTEBOOKS_URL = {
    post: notebookUrlAdapter(`users/${userID}/notebooks`),
    getPVC: notebookUrlAdapter(`users/${userID}/pvcs`)
};

import addAlgorithmTypeForm from 'src/home/mod_cluster/algorithm_manager/label_form/add_algorithm_type.vue';
import trainingUrlAdapter from 'src/home/mod_common/training_url_adapter';

const CARD_URLS = {
    post: trainingUrlAdapter(`user/${userID}/algorithmType`)
};
import resourceDetail from 'src/home/mod_cluster/common/resource/resource_detail.vue';
import resource from 'src/home/mod_cluster/common/resource/resource.vue';

import authUrlAdapter from 'src/home/mod_common/auth_url_adapter';
import IconBg from 'src/components/icon_bg';

const HELP_CENTER = [
    {
        name: _('用户引导'),
        icon: 'iconremind-s',
        url: 'http://docs.geniusai.org/pages/viewpage.action?pageId=234333570'
    },
    {
        name: _('知行社区'),
        icon: 'iconlaba',
        url: 'https://km.atrust.geniusai.com/index.php?app=group&ac=show&id=304'
    },
    {
        name: _('CLI工具下载'),
        icon: 'icondownload',
        url: 'http://nexus.geniusai.com/repository/aip_cli_tools/aip-windows-amd64/1.1.1210/aip-windows-amd64-1.1.1210.exe'
    },
    {
        name: _('提需求/BUG'),
        icon: 'iconyonghufankui',
        url: 'https://or.atrust.geniusai.com/remq/publicRemq'
    },
]

export default {
    components: {
        // HeaderOpr,
        resourceDetail,
        resource,
        IconBg
    },
    
    data() {
        return {
            datasourceImg: require('../img/home/datasource.svg'),
            quickEnterList: [],
            remainSourceData: {}
        };
    },
    
    computed:{
        HELP_CENTER(){
            return HELP_CENTER;
        }
    },
    
    mounted() {
        this.quickEnterList = [
            // {
            //     name: _('项目管理'),
            //     icon: 'iconxiangmu1',
            //     number: 0,
            //     url: 'project_manager'
            // },
            {
                name: _('镜像管理'),
                icon: 'iconjingxiang',
                number: 0,
                url: 'image_manager'
            }, {
                name: _('任务管理'),
                icon: 'iconrenwu',
                number: 0,
                url: '/task_management/task_list'
            }];
        this.queryAjaxCollection();
    },
    methods: {
        queryAjaxCollection() {
            this.getResource();
            this.getInfoResource();
            this.getPvcList();
        },
        async getPvcList() {
            let jsonData = await this.$ajax.get(NOTEBOOKS_URL.getPVC);
            let {success, msg, data} = jsonData;
            if (!success) {
                this.$showErr(msg || _('加载数据失败'));
                return;
            }
            this.pvcList = data.list;
        },
        _refreshResource() {
            this.getResource();
        },
        async getInfoResource() {
            this.$mask();
            const GET_PROFILE_URL = authUrlAdapter(`user/${userID}/profile`);
            let jsonData = await this.$ajax.get(GET_PROFILE_URL);
            this.$unmask();
            let {success, msg, data} = jsonData;
            if (!success) {
                return this.$showErr(msg || _('删除失败'));
            }
            let {
                // dataSourceNum,
                imageNum,
                // projectNum,
                taskNum
            } = data;
            let userList = [
                // {
                //     number: projectNum
                // },
                {
                    number: imageNum
                }, {
                    number: taskNum
                }];
            this.quickEnterList = this.quickEnterList.map((item, index) => {
                item.number = userList[index].number;
                return item;
            });
            
        },
        async getResource() {
            this.$mask();
            const GET_RESOURCE_URL = authUrlAdapter(`user/${userID}/resource`);
            let jsonData = await this.$ajax.get(GET_RESOURCE_URL);
            this.$unmask();
            let {success, msg, data} = jsonData;
            if (!success) {
                return this.$showErr(msg || _('删除失败'));
            }
            this.remainSourceData = data;
            this.$refs.resourceDetail && this.$refs.resourceDetail.setUserJsonValue(data);
        },
        
        handleClickHelp(url) {
            window.open(url, '_blank');
            
        },
        
        handleClickQuickEnter(item) {
            this.$router.push({
                path: item.url
            });
        },
        handleClickQuickAdd(e, index) {
            /*eslint-disable*/
            e.stopPropagation();
            if (index === 0) {
                this._addProject();
            } else if (index === 1) {
                this._addDataSource();
            } else {
                this._addImage();
            }
        },
        
        // 新增项目弹窗
        _createProjectFormWin() {
            this.projectFormWin = this.$modal(addProjectForm, {
                autoDestory: true
            });
        },
        
        //新增项目
        _addProject() {
            this._createProjectFormWin();
            this.projectFormWin.open({
                reset: true,
                title: _('新增项目'),
                submit: () => {
                    let ajaxParams = this.projectFormWin.formRoot.getJsonValue();
                    this.ajaxSubmitProject(ajaxParams, this.projectFormWin);
                }
            });
        },
        
        // 新增/编辑算法的卡片信息
        async ajaxSubmitProject(params, formWin) {
            formWin.$mask();
            let jsonData = await this.$ajax.post(PROJECT_URLS.post, params);
            formWin.$unmask();
            let {success, msg} = jsonData;
            if (!success) {
                return this.$showErr(msg || _('保存失败'));
            }
            ;
            
            this.$ok(msg || _('新增项目成功'));
            formWin.hide();
            
            this.$router.push({
                path: 'project_manager'
            });
            
        },
        
        
        // 新增/编辑算法的卡片信息
        async ajaxSubmitNoteInfo(params, formWin, fetch = 'post') {
            formWin.$mask();
            let jsonData = await this.$ajax[fetch](NOTEBOOKS_URL.post, params);
            formWin.$unmask();
            let {success, msg} = jsonData;
            if (!success) {
                return this.$showErr(msg || _('保存失败'));
            }
            this.$ok(_('保存成功'));
            formWin.hide();
            this.$router.push({
                path: 'code_studio'
            });
        },
        
        //新增数据源
        _addDataSource() {
            this.$router.push({
                path: 'datasource_manager'
            });
        },
        
        _addImage() {
            this.$router.push({
                path: 'image_manager'
            });
        },
        
        // 新增算法场景弹窗
        _createAlgorithmTypeFormWin() {
            if (!this.algorithmTypeFormWin) {
                this.algorithmTypeFormWin = this.$modal(addAlgorithmTypeForm, {
                    autoDestory: true
                });
            }
            return this.algorithmTypeFormWin;
        },
        
        //新增算法场景
        _addAlgorithmType() {
            let formWin = this._createAlgorithmTypeFormWin();
            formWin.open({
                reset: true,
                title: _('新增算法场景'),
                submit: () => {
                    let ajaxParams = formWin.formRoot.getJsonValue();
                    this.ajaxSubmitCardInfo(ajaxParams, formWin);
                }
            });
        },
        // 新增/编辑算法的卡片信息
        async ajaxSubmitCardInfo(params, formWin, fetch = 'post') {
            formWin.$mask();
            let jsonData = await this.$ajax.post(CARD_URLS.post, params);
            formWin.$unmask();
            let {success, msg} = jsonData;
            if (!success) {
                return this.$showErr(msg || _('新增算法失败'));
            }
            this.$ok(_('新增算法成功'));
            formWin.hide();
            this.$router.push({
                path: 'algorithm_manager'
            });
        },
        
        updateData(data) {
            this.$refs.resource && this.$refs.resource.setData(data);
        }
        
    }
};
</script>
